<template>
  <h1>一个人的信息</h1>
  <h2>姓：<input type="text" v-model="person.fistName"></h2>
  <h2>名：<input type="text" v-model="person.lastName"></h2>
  <h1>全名：{{ person.fullName }}</h1>
  <h1>全名：<input type="text" v-model="person.fullName"></h1>
</template>

<script>
import {reactive,computed} from 'vue'

export default {

  setup() {
    // 数据
    let person = reactive({
      fistName: '张',
      lastName: '三'
    })

    // 方法

    // 计算属性-简写(没有考虑修改的情况)
    // person.fullName = computed(() => {
    //   return person.fistName + '-' + person.lastName
    // })

    // 计算属性-完整写法(考虑修改)
    person.fullName = computed({
      get(){
        return person.fistName + '-' + person.lastName
      },
      set(value){
        let nameArr = value.split('-');
        person.fistName = nameArr[0];
        person.lastName = nameArr[1]
      }
    })

    // 返回一个对象
    return {
      person
    }
  }
}
</script>

<style scoped>

</style>
